<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学术助手 - 后台管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .table-row:hover {
            background-color: #f8fafc;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 登录验证脚本 -->
    <script>
        // 检查登录状态
        async function checkAuth() {
            const token = localStorage.getItem('adminToken');
            
            if (!token) {
                // 没有token，跳转到登录页面
                window.location.href = 'login.html';
                return;
            }
            
            try {
                // 验证token
                const response = await fetch('/api/admin/verify', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ token })
                });
                
                const result = await response.json();
                
                if (!result.success) {
                    // token无效，清除并跳转到登录页面
                    localStorage.removeItem('adminToken');
                    window.location.href = 'login.html';
                    return;
                }
                
                // token有效，显示页面内容
                document.body.style.display = 'block';
                
            } catch (error) {
                console.error('验证失败:', error);
                // 验证失败，跳转到登录页面
                localStorage.removeItem('adminToken');
                window.location.href = 'login.html';
            }
        }
        
        // 页面加载时隐藏内容并检查登录状态
        document.body.style.display = 'none';
        checkAuth();
    </script>
    
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <i class="fas fa-graduation-cap text-blue-600 text-2xl mr-3"></i>
                    <h1 class="text-xl font-semibold text-gray-900">学术助手 - 后台管理</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="text-gray-600 hover:text-blue-600 transition-colors">
                        <i class="fas fa-home mr-1"></i>返回首页
                    </a>
                    <div class="text-sm text-gray-500">
                        <i class="fas fa-user mr-1"></i>管理员
                    </div>
                    <button onclick="logout()" class="text-red-600 hover:text-red-800 transition-colors">
                        <i class="fas fa-sign-out-alt mr-1"></i>退出登录
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <!-- 页面标题和操作按钮 -->
        <div class="mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold text-gray-900">资源管理</h2>
                    <p class="text-gray-600 mt-1">管理学术资源的增删改查操作</p>
                </div>
                <div class="flex space-x-3">
                    <button id="addResourceBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                        <i class="fas fa-plus mr-2"></i>添加资源
                    </button>
                    <button id="batchImportBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors">
                        <i class="fas fa-upload mr-2"></i>批量导入
                    </button>
                </div>
            </div>
        </div>

        <!-- 搜索和筛选区域 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col sm:flex-row gap-4">
                <div class="flex-1">
                    <div class="relative">
                        <input type="text" id="searchInput" placeholder="搜索资源名称或网址..." 
                               class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>
                <button id="refreshBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-sync-alt mr-2"></i>刷新
                </button>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-blue-100">
                        <i class="fas fa-database text-blue-600"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">总资源数</p>
                        <p id="totalCount" class="text-2xl font-semibold text-gray-900">0</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-green-100">
                        <i class="fas fa-check-circle text-green-600"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">有效链接</p>
                        <p id="validCount" class="text-2xl font-semibold text-gray-900">0</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-yellow-100">
                        <i class="fas fa-clock text-yellow-600"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">最后更新</p>
                        <p id="lastUpdate" class="text-sm font-semibold text-gray-900">刚刚</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 资源列表表格 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">资源列表</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资源名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">网址</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody id="resourceTableBody" class="bg-white divide-y divide-gray-200">
                        <!-- 动态生成的资源行 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页 -->
        <div class="mt-6 flex items-center justify-between">
            <div class="text-sm text-gray-700">
                显示第 <span id="pageStart">1</span> 到 <span id="pageEnd">10</span> 条，共 <span id="pageTotal">0</span> 条记录
            </div>
            <div class="flex space-x-2">
                <button id="prevPage" class="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50">
                    上一页
                </button>
                <button id="nextPage" class="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50">
                    下一页
                </button>
            </div>
        </div>
    </div>

    <!-- 添加/编辑资源模态框 -->
    <div id="resourceModal" class="modal">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 fade-in">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 id="modalTitle" class="text-lg font-medium text-gray-900">添加资源</h3>
            </div>
            <form id="resourceForm" class="px-6 py-4">
                <div class="mb-4">
                    <label for="resourceName" class="block text-sm font-medium text-gray-700 mb-2">资源名称</label>
                    <input type="text" id="resourceName" name="name" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="请输入资源名称">
                </div>
                <div class="mb-6">
                    <label for="resourceUrl" class="block text-sm font-medium text-gray-700 mb-2">资源网址</label>
                    <input type="url" id="resourceUrl" name="url" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="请输入完整的网址（包含 http:// 或 https://）">
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancelBtn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
                        取消
                    </button>
                    <button type="submit" id="saveBtn" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="deleteModal" class="modal">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 fade-in">
            <div class="px-6 py-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">确认删除</h3>
                        <p class="text-sm text-gray-600 mt-1">您确定要删除这个资源吗？此操作无法撤销。</p>
                    </div>
                </div>
            </div>
            <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
                <button id="cancelDeleteBtn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md transition-colors">
                    取消
                </button>
                <button id="confirmDeleteBtn" class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors">
                    删除
                </button>
            </div>
        </div>
    </div>

    <!-- 批量导入模态框 -->
    <div id="batchImportModal" class="modal">
        <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 fade-in">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">批量导入资源</h3>
                <p class="text-sm text-gray-600 mt-1">每行一个资源，格式：资源名称 网址（用空格分隔）</p>
            </div>
            <form id="batchImportForm" class="px-6 py-4">
                <div class="mb-4">
                    <label for="batchImportText" class="block text-sm font-medium text-gray-700 mb-2">批量导入数据</label>
                    <textarea id="batchImportText" name="batchData" rows="10" required 
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none"
                              placeholder="示例：\n百度 https://www.baidu.com\n谷歌 https://www.google.com\n知网 https://www.cnki.net"></textarea>
                </div>
                <div class="mb-4 p-3 bg-blue-50 rounded-md">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-blue-500 mt-0.5 mr-2"></i>
                        <div class="text-sm text-blue-700">
                            <p class="font-medium mb-1">格式说明：</p>
                            <ul class="list-disc list-inside space-y-1">
                                <li>每行一个资源，格式：<code class="bg-blue-100 px-1 rounded">资源名称 网址</code></li>
                                <li>资源名称和网址之间用空格分隔</li>
                                <li>网址必须包含 http:// 或 https://</li>
                                <li>重复的资源名称或网址将被跳过</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancelBatchBtn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
                        取消
                    </button>
                    <button type="submit" id="importBtn" class="px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors">
                        <i class="fas fa-upload mr-2"></i>开始导入
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="js/admin.js"></script>
</body>
</html>